トリガーを使用したカスタム UI の表示

このトピックでは、トリガーボタンがクリックされたときにカスタムインタフェースを表示する方法について例示します。この例では、ユーザーが C1InputNumeric コントロール内の矢印をクリックすると、ドロップダウンスライダが表示され、スライダのつまみがドラッグされると、入力値が変化します。

フォーム上の C1InputNumeric コントロールを右クリックし、［プロパティ］を選択して、Visual Studio のプロパティウィンドウを開きます。
ShowDropDownButton プロパティを「True」に設定し、DecimalPlaces プロパティを「0」に設定します。
OnClientDropDownButtonMouseDown プロパティの横に、triggerClicked を入力します。
「ソース」タブを選択して、ソースビューを開きます。

.aspx ソースで、最後の </asp:Content> 直前に次のスクリプトマークアップを入力します。

ソースビュー	コードのコピー
<script type="text/javascript"> $(function () { $(".dropdown-container").c1popup({ autoHide: true, showEffect: 'drop', hideEffect: 'fade' }); }); function triggerClicked(e) { var $input = $('#<%=C1InputNumeric1.ClientID%>'); var val = $input.c1inputnumeric('option', 'value'); var $volumeSlider = $('.valueslider'); $volumeSlider.slider({ min: 0, max: 5, value: val, step: 1, orientation: 'vertical', range: 'min', slide: function (e, ui) { $input.c1inputnumeric('option', 'value', ui.value); } }); $(".dropdown-cntainer").c1popup('show', { of: $('.wijmo-wijinput'), at: 'right bottom', my: 'right top', offset: "4 2" }); }

ソースビュー

コードのコピー

<script type="text/javascript">

        $(function () {
            $(".dropdown-container").c1popup({
                autoHide: true,
                showEffect: 'drop',
                hideEffect: 'fade'
            });
        });
function triggerClicked(e) {
            var $input = $('#<%=C1InputNumeric1.ClientID%>');
            var val = $input.c1inputnumeric('option', 'value');
            var $volumeSlider = $('.valueslider');
            $volumeSlider.slider({
                  min: 0,
                  max: 5,
                  value: val,
                  step: 1,
                  orientation: 'vertical',
                  range: 'min',
                  slide: function (e, ui) {
                        $input.c1inputnumeric('option', 'value', ui.value);
                  }
            });
            $(".dropdown-cntainer").c1popup('show', {

                  of: $('.wijmo-wijinput'),
                  at: 'right bottom',
                  my: 'right top',
                  offset: "4 2"
            });
      }

<asp:Content ContentPlaceHolderID="HeadContent"> タグ内に .dropdown-container と .valueslider に対して以下のマークアップを追加します。

ソースビュー	コードのコピー
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> <style type="text/css"> .dropdown-container { height: 127px; margin: 0; padding: 0; width: 25px; } .valueslider { left: 4px; height: 103px; } </style> </asp:Content>

ソースビュー

コードのコピー

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<style type="text/css">   
      .dropdown-container
      {
            height: 127px;
            margin: 0;
            padding: 0;
            width: 25px;
      } 
      .valueslider
      {
            left: 4px;
            height: 103px;
      }
</style>
</asp:Content>

その後、<asp:Content ContentPlaceHolderID="MainContent"> タグ内に下記のマークアップを追加します。

ソースビュー	コードのコピー
<div class="dropdown-container"> <div class="valueslider ui-state-default ui-corner-top"></div> </div>

ユーザーがドロップダウン矢印をクリックしたとき、スライダがポップアップします。スライダが動くと、数量が変化し、次のような表示になります。